<script setup>
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { useUser } from "@/store/useUser.js";
import CommonModal from "@/components/modal/CommonModal.vue";
import { useRouter } from "vue-router";
import { useMsg } from "@/store/useMsg";

const currentRoute = ref("");
const userStore = useUser();
const router = useRouter();
const msgStore = useMsg();
const userInfo = userStore.getUserInfo;

onBeforeRouteUpdate((to, from, next) => {
  currentRoute.value = to.path;
  next();
});

const logoutModalShow = ref(false);
const logout = async () => {
  await userStore.logoutAction();
  router.push("/login");
};

onMounted(() => {
  currentRoute.value = useRoute().path;
});
</script>

<template>
  <div class="menu-left">
    <img
      class="logo"
      src="@/assets/logo-small.png"
      alt="技能猴子"
      title="技能猴子"
    />
    <div class="menu-list">
      <router-link to="/message">
        <div class="menu-item" :class="{ active: currentRoute === '/message' }">
          <el-badge :value="msgStore.getMsgUnreadCount" :hidden="msgStore.getMsgUnreadCount === 0" class="item">
          <img
            v-if="currentRoute === '/message'"
            src="@/assets/menu/menu-icon-1-active.png"
            alt=""
          />
          <img v-else src="@/assets/menu/menu-icon-1.png" alt="" />
          <span>消息</span>
          </el-badge>
        </div>
      </router-link>
      <router-link to="/goodsManage">
        <div
          class="menu-item"
          :class="{ active: currentRoute === '/goodsManage' }"
        >
          <img
            v-if="currentRoute === '/goodsManage'"
            src="@/assets/menu/menu-icon-2-active.png"
            alt=""
          />
          <img v-else src="@/assets/menu/menu-icon-2.png" alt="" />
          <span>卖技能</span>
        </div>
      </router-link>
      <router-link to="/evaluate">
        <div
          class="menu-item"
          :class="{ active: currentRoute === '/evaluate' }"
        >
          <img
            v-if="currentRoute === '/evaluate'"
            src="@/assets/menu/menu-icon-3-active.png"
            alt=""
          />
          <img v-else src="@/assets/menu/menu-icon-3.png" alt="" />
          <span>评价</span>
        </div>
      </router-link>
      <router-link to="/order">
        <div class="menu-item" :class="{ active: currentRoute === '/order' }">
          <img
            v-if="currentRoute === '/order'"
            src="@/assets/menu/menu-icon-4-active.png"
            alt=""
          />
          <img v-else src="@/assets/menu/menu-icon-4.png" alt="" />
          <span>订单</span>
        </div>
      </router-link>
      <router-link to="/fund">
        <div class="menu-item" :class="{ active: currentRoute === '/fund' }">
          <img
            v-if="currentRoute === '/fund'"
            src="@/assets/menu/menu-icon-5-active.png"
            alt=""
          />
          <img v-else src="@/assets/menu/menu-icon-5.png" alt="" />
          <span>资金</span>
        </div>
      </router-link>
    </div>
    <div class="user">
      <img v-if="userInfo && userInfo.avatar" :src="userInfo.avatar" alt="" />
      <img v-else src="@/assets/logo-small.png" alt="" />
      <div class="user-menu">
        <router-link to="/userHomePage"
          >我的主页 <el-icon class="icon"><ArrowRight /></el-icon
        ></router-link>
        <router-link to="appDownload"
          >下载APP <el-icon class="icon"><ArrowRight /></el-icon
        ></router-link>
        <router-link to="/platformRules"
          >平台规则 <el-icon class="icon"><ArrowRight /></el-icon
        ></router-link>
        <router-link to="/weChatBinding"
          >绑定微信通知 <el-icon class="icon"><ArrowRight /></el-icon
        ></router-link>
        <router-link to="/setUp"
          >设置 <el-icon class="icon"><ArrowRight /></el-icon
        ></router-link>
        <p @click="logoutModalShow = true">
          退出登录 <el-icon class="icon"><ArrowRight /></el-icon>
        </p>
      </div>
    </div>
  </div>
  <!--  登出提示 -->
  <CommonModal
    title="提示"
    v-if="logoutModalShow"
    @confirm="logout"
    @close="logoutModalShow = false"
  >
    <template #content>
      <p class="logout-tip">确定要退出系统？</p>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.menu-left {
  flex: 1;
  background: #1f2227;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 24px;
  box-sizing: border-box;
}
.logo {
  width: 44px;
  height: 44px;
}
.menu-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
    padding: 8px 0;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    .item{
      display: flex;
    flex-direction: column;
    align-items: center;
    }
    &.active {
      background: #2e3237;
      span {
        color: #ffffff;
      }
    }
    &:hover {
      background: #2e3237;
      span {
        color: #ffffff;
      }
    }
    img {
      width: 24px;
      height: 24px;
    }
    span {
      font-size: 13px;
      color: #b6babf;
    }
  }
}
.user {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  &:hover {
    .user-menu {
      display: block;
    }
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .user-menu {
    display: none;
    position: absolute;
    left: 60px;
    bottom: 0;
    z-index: 9;
    background: #fff;
    box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid rgba(25, 30, 40, 0.08);
    min-width: 160px;
    padding: 5px 2px;
    &:after {
      content: "";
      position: absolute;
      left: -30px;
      bottom: 0;
      width: 30px;
      height: 100%;
      background: none;
    }
    p,
    a {
      padding: 12px 16px;
      color: #191e28;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: none;
      &:hover {
        background: #f9f9f9;
        .icon {
          color: #1dbf73;
        }
      }
    }
  }
}
.logout-tip {
  padding-top: 10px;
}
</style>